<template>
    <view class="wrap">
        <view class="search_wrap">
            <u--input placeholder="请输入搜索关键字" prefixIcon="search" prefixIconStyle="font-size: 20px;color: #AFAFAF"
                placeholder-style="font-size: 28rpx;color: #AFAFAF;" border="none"
                :customStyle="{ height: '72rpx', background: '#EFEFEF', 'border-radius': '50rpx', padding: '0 32rpx' }"
                @confirm="getClassList"></u--input>
        </view>
        <view class="code_box">
            <view class="code_type" @click="openPicker">
                <view class="type_text">{{ chooceData[0].Name || '督学一级分类' }} / {{ chooceData[1].Name || '督学二级分类' }}</view>
                <view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
            </view>
            <u-empty mode="list" v-if="!renderList.length"></u-empty>
            <view class="code_list">
                <view class="code_item" v-for="item in renderList" :key="item.Id">
                    <view class="item_name">{{ item.Name }}</view>
                    <view class="item_detail">
                        <view class="item_price">价格：￥{{ item.ShowPrice }} /</view>
                        <view class="item_cost">成本：￥{{ item.OriginPrice }}</view>
                    </view>
                    <view class="item_buy">
                        <view class="item_quantity">
                            <view class="add" @click="addCount(item)">+</view>
                            <view class="num">{{ item.count }}</view>
                            <view class="less" @click="subtract(item)">-</view>
                        </view>
                        <view class="item_total">￥<text class="big_text">{{ item.OriginPrice }}</text>.00</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom">
            <view class="cost_total">成本合计<text class="red_text">￥{{ allCount }}.00</text></view>
            <view class="verify" @click="toBuy">确认</view>
        </view>
        <!-- 多级联动 -->
        <u-picker :show="showPicker" ref="uPicker" :columns="columns" :keyName="'Name'" :default-value="defaultValue"
            @confirm="confirm" @cancel="showPicker = false" @change="changeHandler"></u-picker>
    </view>
</template>
<script>
export default {
    data () {
        return {
            search: '',
            showPicker: false,
            columns: [],
            classData: [],
            defaultValue: [0, 0],
            chooceData: [],
            renderList: [],
            allCount: 0,
        }
    },
    created () {
        this.getClassList();
    },
    methods: {
        openPicker () {
            this.showPicker = true;
        },
        addCount (data) {
            data.count++
            this.allCount += data.OriginPrice;
        },
        subtract (data) {
            if (data.count > 0) {
                data.count--
                this.allCount -= data.OriginPrice;
            }
        },
        async getDataList (categoryId) {
            uni.showLoading({ title: "加载中" });
            const res = await this.$http.get(`yatiya/questionstoresubjects/${categoryId}`);
            uni.hideLoading()
            this.renderList = res.Data.filter(x => !x.HasMap).map(item => {
                return { ...item, count: 0 }
            });
            this.allCount = 0;
            console.log(this.renderList, 'this.renderList')
        },
        async getClassList () {
            const res = await this.$http.get('yatiya/questionstorecategorys');
            this.classData = res.Data;
            const firstData = this.classData.map(d => {
                return { Name: d.Name, id: d.Id }
            })
            this.columns = [[...firstData], [...this.classData[0].Childs.map(d => { return { Name: d.Name, id: d.Id } })]]
            this.chooceData = [firstData[0], this.classData[0].Childs[0]]
            this.getDataList(this.classData[0].Childs[0].Id);
            console.log(this.classData[0].Childs, 'firstData---');
        },
        changeHandler (e) {
            const {
                columnIndex,
                value,
                values, // values为当前变化列的数组内容
                index,
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
                // picker为选择器this实例，变化第二列对应的选项
                picker.setColumnValues(1, this.classData[index].Childs.map(d => { return { Name: d.Name, id: d.Id } }))
            }
        },
        // 回调参数为包含columnIndex、value、values
        confirm (e) {
            this.showPicker = false;
            this.chooceData = e.value;
            console.log(e.value, 'vvv');
            this.getDataList(e.value[1].id);
        },
        // 提交订单
        async toBuy () {
            const ids = this.renderList.filter(x => x.count).map(x => x.Id)
            if (!ids.length) {
                return uni.showToast({
                    title: '请添加购入数量',
                    icon: "none"
                });
            }
            const res = await this.$http.post('yatiya/questionstoreorder', ids)
            if (res.Code == 200) {
                uni.showToast({
                    title: '购买成功'
                });
                setTimeout(() => {
                    let pages = getCurrentPages();
                    let prevPage = pages[pages.length - 2]; //上一个页面
                    prevPage.$vm.setTabs(2)
                    uni.navigateBack()
                }, 1000);
            } else {
                uni.showToast({
                    icon: "error",
                    title: res.Msg
                });
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;

    .search_wrap {
        width: 100%;
        height: 142rpx;
        background: #fff;
        padding: 30rpx 36rpx;
        box-sizing: border-box;
    }

    .code_box {
        width: 100%;
        min-height: calc(100vh - 142rpx);
        padding: 40rpx 28rpx;
        box-sizing: border-box;
        background: #ECECEC;
        margin-bottom: 100rpx;

        .code_type {
            height: 70rpx;
            background: #FFFFFF;
            border-radius: 12rpx;
            padding: 16rpx 20rpx 14rpx 20rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .type_text {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
            }
        }

        .code_list {
            margin-top: 32rpx;

            .code_item {
                background: #FFFFFF;
                box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.05);
                border-radius: 12rpx;
                padding: 36rpx 28rpx 32rpx 34rpx;
                box-sizing: border-box;
                margin-bottom: 24rpx;

                .item_name {
                    font-family: PingFang SC;
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #000000;
                    line-height: 50rpx;
                }

                .item_detail {
                    display: flex;
                    margin-top: 18rpx;
                    height: 40rpx;
                    font-family: PingFang SC;
                    font-size: 28rpx;
                    color: #64707D;
                    line-height: 40rpx;

                    .item_cost {
                        margin-left: 16rpx;
                    }
                }

                .item_buy {
                    height: 66rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 40rpx;

                    .item_quantity {
                        display: flex;
                        align-items: center;

                        .add,
                        .less {
                            width: 56rpx;
                            height: 56rpx;
                            background: #E3E7EC;
                            border-radius: 12rpx;
                            font-size: 48rpx;
                            color: #64707D;
                            text-align: center;
                            line-height: 48rpx;
                        }

                        .num {
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 36rpx;
                            color: #000000;
                            margin: 0 32rpx;
                        }
                    }

                    .item_total {
                        font-family: PingFang SC;
                        font-weight: 800;
                        font-size: 28rpx;
                        color: #FF0000;

                        .big_text {
                            font-size: 48rpx;

                        }
                    }
                }
            }
        }
    }

    .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 102rpx;
        display: flex;
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #000000;
        line-height: 102rpx;

        .cost_total {
            width: 494rpx;
            height: 102rpx;
            background: #fff;
            padding-left: 40rpx;
            box-sizing: border-box;

            .red_text {
                font-size: 36rpx;
                color: #FF0000;
            }
        }

        .verify {
            width: 258rpx;
            height: 102rpx;
            background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
            font-size: 36rpx;
            color: #FFFFFF;
            text-align: center;
        }
    }
}
</style>